<template>
  <!--循环展示noteli变量-->
  

<el-row>
  <!--热榜-->
  <div class="box">
    <el-col :span="24" class="search">
    <el-col :span="16" class="search" >
      <el-input
        placeholder="请输入笔记名字关键字"
        class="w-150 my-3"
        v-model="searchVal"
      >
        <!--把按钮的内容放到el-input标签中的<slot name="append"></slot>-->
        <template #append>
          <el-button type="info" plain @click="getNoteLi">
            <el-icon style="font-size: 1rem"><Search /></el-icon>
          </el-button>
        </template>
      </el-input>
    </el-col>
</el-col>

  </div>

<!--list-->
<el-col :span="20" class="bg-light">
   <div class="bg-r">
    <el-card
      shadow="hover"
      v-for="(note, index) in noteli"
      :key="note.noteId"
      class="mb-2"
    >
      <el-row>
        <el-col :span="18"
          ><el-link type="primary"
            ><router-link :to="{ path: '/detail/' + note.noteId }" class="fs-3">
              {{ note.noteName }}</router-link
            ></el-link
          >
        </el-col>
      </el-row>
      <el-row class="mt-2">
        <el-col :span="3">
          <img class="w-100" :src="note.headUrl" />
        </el-col>
        <el-col :span="15" class="ps-2">
          {{ note.noteIntro }}
        </el-col>
      </el-row>
      <el-row class="mt-2">
        <el-col :span="3">{{ note.authorName }}</el-col>
        <el-col :span="6" class="ps-2">{{ note.publishTime }}</el-col>
        <el-col :span="3" :offset="1"
          ><el-icon class="h-100" @click="likeAction(noteId, index)"
            ><Star /></el-icon
          >{{ note.likeNum }}</el-col
        >
        <el-col :span="3"
          ><el-icon class="h-100"><ChatLineRound /></el-icon
          >{{ note.commentNum }}</el-col
        >
        <el-col :span="3"
          ><el-icon class="h-100"><View /></el-icon>{{ note.viewNum }}</el-col
        >
      </el-row>
    </el-card>
  </div>

</el-col>
 
  <!--热榜-->
   <el-col :span="4" class="bg-light ps-3 pt-2">
<div>
    <div class="fs-4">24小时阅读排行</div>
    <ol>
      <li v-for="rank in rankli" :key="rank.noteId">
        {{ rank.noteName }}
      </li>
    </ol>
  </div>
    </el-col>
</el-row>
   
</template>

<script>
var Mock = require("mockjs");
import { Star, ChatLineRound, View } from "@element-plus/icons-vue";
export default {
  name: "PostBar",
  //自定义属性，定义一个叫做noteName，它的参数类型为String
  //别的组件要给当前组件传参数
  props: {
    noteName: String,
  },
  components: {
    Star,
    ChatLineRound,
    View,
  },
  data() {
    //声明当前页面要使用的变量
    return {
      search: null,
      noteli: [], //用于展示笔记列表
      rankli: [],
    };
  },
  mounted() {
    //该函数是vue声明周期一部分，该函数会在页面渲染完毕后执行
    this.getNoteli();
    this.getRankLi();
  },
  watch: {
    noteName() {
      //监听noteName值的变化
      console.log(this.noteName);
      this.getNoteLi();
    },
  },
  methods: {
    //自定义函数的位置
    getNoteli() {
      this.$axios
        .get("/api/home/list?noteName=" + this.noteName)
        .then((response) => {
          this.noteli = response.data;
        });
    },
    getRankLi() {
      let data = Mock.mock({
        "list|5": [
          {
            "noteId|+1": 1,
            noteName: "@ctitle(5,10)",
          },
        ],
      });
      this.rankli = data.list;
    },
  
},
    /**
     * noteId就是每个笔记的笔记id
     * index是当前笔记在noteli中的索引
     */
    likeAction(noteId, index) {
      this.$axios.get("/api/home/like?noteId=" + noteId).then((response) => {
        let data = response.data;
        alert(data.msg);
        if (data.code == 200) {
          this.noteli[index].likeNum += 1;
        }
      });
    },
  }
</script>

<style>
.box{

  width: 100%;
}
.search{
  margin-left: 40px;
  width: 100%;
}
</style>